<template>
  <el-row class="jqNoticeDrawer">
    <commonDrawer
      title="公告"
      :drawer="drawer"
      :size="'600px'"
      :isShowMoreBtn="false"
      @closeDraw="closeDraw"
      :append-to-body="true"
    >
      <template slot="column">
        <div class="notice-area">
          <div class="notice-title">{{noticeData.title || ''}}</div>
          <div class="notice-detail">
            <span style="padding-right:20px" v-if="noticeData.attachs.length > 0"><i class="V7_iconfont V7_iconV7tubiao_fujian" style="font-size:12px"></i> {{ noticeData.attachs.length }}</span>
            <span>{{ noticeData.publishTime }}</span>
            <span style="float:right">{{ getAgentName(noticeData.publishAgent) }}</span>
          </div>
          <div class="notice-content" v-html="noticeData.content"></div>
          <div class="notice-attachs" v-if="noticeData.attachs.length > 0">
            <div class="attach-title">附件</div>
            <a :href="doMain + item.id" target="_blank" download class="download-attach" v-for="(item, index) in noticeData.attachs" :key="index">
              <div class="attach-type" v-fileSvg="item.name"></div>
              <div class="attach-detail">
                <p class="attach-name">{{ item.name }}</p>
                <p class="attach-preview" title="预览" v-preview.delete.prevent="[item.name, doMain + item.id]"><i style="font-size:12px;margin-left:8px;cursor:pointer" class="V7_iconfont V7_iconV7tubiao_kejian"></i></p>
                <p class="attach-size">{{ item.size }}</p>
              </div>
            </a>
          </div>
        </div>
      </template>
    </commonDrawer>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import commonDrawer from '@/common/views/drawer/index.vue';
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'NoticeDrawer',
  components: {
    commonDrawer
  }
})
export default class NoticeDrawer extends Vue {
  private $store: any
  private doMain: string = ''
  private drawer: boolean = false
  private noticeData: any = {
    title: '',
    publishTime: '',
    content: '',
    publishAgent: '',
    level: '',
    attachs: []
  }

  private mounted () {
    (this as any).$getCache('/base/action/general/cache/query', ['userList'], true)
  }

  @Watch('$route')
  public close () {
    this.drawer = false;
  }

  private async openDraw (data: any) {
    this.noticeData = { ...this.noticeData, ...data }
    const initConfig = this.$store.state.common.initConfig
    const doMain = initConfig && initConfig.qiniuDomainMap ? initConfig.qiniuDomainMap.common : ''
    this.doMain = doMain + '/'
    this.drawer = true
  }

  private getAgentName (agentId) {
    const agent = (CommonModule as any).publicCache.userListObj[agentId]
    if (agent) {
      return agent.name
    }
    return ''
  }

  private closeDraw () {
    this.drawer = false;
    this.$emit('closeDraw')
  }
}
</script>

<style lang="stylus" scoped>
  .notice-area
    .notice-title
      line-height 22px
      font-size: 14px;
      font-family: PingFang SC
      font-weight: 500
      color: #303753
    .notice-detail
      font-size: 12px
      font-family: PingFang SC
      font-weight: 400
      color: #767E91
      margin 15px 0px
    .notice-content
      border-top: 1px solid #ECF0F3
      padding: 15px 0px
      font-size: 12px;
      font-family: PingFang SC
      font-weight: 400
      color: #71798C
      line-height: 20px
      >>> img,video
            max-width: 100%
      >>> p
            line-height: 20px
    .notice-attachs
      margin-top 10px
      .attach-title
        font-size: 12px
        font-family: PingFang SC
        font-weight: 500
        color: #222222
        padding-bottom 10px
        border-bottom: 1px solid #ECF0F3
      .download-attach
        height: 52px;
        background: #FFFFFF;
        border: 1px solid #EDEDED
        border-radius: 4px
        padding 0 12px
        margin-top 10px
        display: block
        .attach-type
          width: 30px;
          height: 30px;
          margin: 12px
          margin-left: 0px
          margin-top 10px
          float: left
        .attach-detail
          float: left
          position relative
          padding: 10px 0px
          .attach-name
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #151515;
            line-height: 12px
            max-width: 400px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          .attach-preview
            position: absolute
            right: -20px
            top 8px
          .attach-size
            font-size: 12px
            font-family: PingFang SC
            font-weight: 400
            color: #999999
            line-height: 12px
            margin-top: 6px
</style>
